/*
 * @Author: Zhang Kai
 * @Date: 2022-04-06 14:58:53
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-08 16:46:05
 * @FilePath: /metricsx-standard-ui/src/views/indexlib/components/recentviewList/index.tsx
 */
import API from '@/services';
import { onMounted, reactive, defineComponent, watch } from 'vue';
import './index.scss';

//指标库右侧搜索业务组件
const RecentViewList = defineComponent({
  name: 'RecentViewList',
  setup: (props, { slots, attrs, emit }) => {
    const state = reactive({
      input: '',
      pageNum: 1,
      pageSize: 10,
      pages: 1,
      loading: false,
      dataList: [] as defs.DerivedMetricsLibrarySearchByNameVO[],
      isSearch: false
    });

    const getNextPage = () => {
      state.pageNum++;
      getRecentViewList();
    };
    const getLevelName = (item: any) => {
      const { firstSubjectName, secondSubjectName, thirdSubjectName } = item;
      return `${firstSubjectName} ${secondSubjectName ? '| ' + secondSubjectName : ''
        } ${thirdSubjectName ? '| ' + thirdSubjectName : ''}`;
    };
    const getRecentViewList = async () => {
      const params = {
        cnName: state.input,
        pageNum: state.pageNum,
        pageSize: state.pageSize
      };
      const { code, data } = await API.recentView.getRecentView(params);
      if (code === 200 && data) {
        if (state.pageNum > 1) {
          state.dataList = [...state.dataList, ...(data.list || [])];
        } else {
          if (data.list) {
            state.dataList = data.list;
          }
        }

        state.pageNum = data.pageNum ? data.pageNum : 1;
        state.pages = data.pages ? data.pages : 10;
      }
    };
    const openNewDetail = (id: any) => {
      window.open(
        `${process.env.VUE_APP_PUBLICPATH === '/'
          ? ''
          : process.env.VUE_APP_PUBLICPATH
        }#/market/detail?id=${id}`,
        '_blank'
      );
    };
    onMounted(() => {
      getRecentViewList();
    });
    watch(
      () => {
        state.input;
      },
      (val: any) => {
        if (val === '') {
          state.isSearch = false;
          state.pageNum = 1;
          getRecentViewList();
        } else {
          state.isSearch = true;
          state.dataList = [];
        }
      }
    );
    return () => {
      return (
        <div class="recent-view-list-wrap">
          <header class="list-header">
            <el-input
              v-model={state.input}
              placeholder="请输入关键词查看结果"
              suffix-icon="el-icon-search"
              clearable
              size="large"
              onInput={() => {
                state.pageNum = 1;
                getRecentViewList()
              }}
              onClear={() => {
                state.pageNum = 1;
                getRecentViewList()
              }}
            />
          </header>
          <section class="list-wrap">
            {state.dataList.map((item: any, idx) => (
              <div class="list-item">
                <el-tooltip content={item.cnName} placement="top">
                  <div
                    class="list-content"
                    onClick={() => openNewDetail(item.id)}
                  >
                    {item.cnName}
                  </div>
                </el-tooltip>

                <div class="list-level-info">{getLevelName(item)}</div>
              </div>
            ))}
          </section>
          {state.pageNum !== state.pages &&
            state.pages !== 0 &&
            !state.isSearch && (
              <footer class="footer">
                <a href="javascript:void(0)" class="link" onClick={getNextPage}>
                  加载更多...
                </a>
              </footer>
            )}
        </div>
      );
    };
  }
});

export default RecentViewList;
